<template>
	<view class="wrapper" :style="{padding:`calc(88rpx + ${safeTop}px) 0 0`}">
		<div class="header posf flex-start" :style="{padding:`calc(10rpx + ${safeTop}px) 35rpx 28rpx`}">
			<u-icon name="arrow-left" color="#FFFFFF" size="26" @click="back(1)"></u-icon>
			<div class="f34 ml10 cfff">充值</div>
		</div>
		<div class="box1 bfff">
			<div class="f32 fbold mb35">账户余额</div>
			<div class="f22 c999"><span class="fbold f32">{{Hyxx.balance}} </span>积分</div>
		</div>
		<div class="box2 bfff">
			<div class="f26 mb50">直接选择金额进行充值</div>
			<div class="recharge-box flex-start fWrap ml5">
				<div class="colum amount posr" v-for="(v,i) in list" @click="getweChatrecharge(v)">
					<div class="f22 text1"><span class="f36 fbold">{{v}}</span>元</div>
					<div class="mt25 f22 c999">{{v}}积分</div>
					<div class="f22 cfff suggest posa center" v-if="i==0">推荐</div>
				</div> 
			</div>
		</div>
		<div class="box2 bfff">
			<div class="mb50">
				<div class="f32 fbold mb30 ml30">自定义充值金额</div>
				<input maxlength="6" type="number" placeholder="请输入充值金额" placeholder-style="color:#CFCFCF"
					class="phone"   v-model="payAmount" />
			</div> 
			<div class="f30 center btn cfff" @click="pay">确认充值</div>
		</div>
		<div class="box3">
			<div class="f32 mb20 ml5 fbold">充值须知</div>
			<div class="f22 text2 c999">1、积分属于虚拟商品，已经购买不可退换；
				2、未满18岁的未成年人需在监护人主导、同意下进行相关付费操作；
				3、充值后一般5分钟内到账，如未到账请在“我的”页面联系客服；
				4、购买成功后可在“我的”页面充值记录中查看；
				5、积分和会员仅在小程序内使用。
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [5, 10, 20, 50, 100, 200],
				userInfo: '',
				recharge: {},
				Hyxx: {},
				payAmount: 5
			}
		},
		onShow() {
			if (this.userInfo) {
				this.getgetHyxx()
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('uInfo')
		},
		methods: {
		 
			// 获取会员信息
			getgetHyxx() {
				this.$http('/api/getHyxx', {
					token: this.userInfo.token
				}).then((r) => {
					this.Hyxx = r.data
				})
			},
			pay() {
				if(this.payAmount>0){
					  this.getweChatrecharge(this.payAmount);
				}
			},
			// 充值积分下单
			getweChatrecharge(v) {
				let that = this
				wx.login({
					success(res) {
						if (res.code) {
							that.$http('/api/weChat/recharge', {
								totalFee: v,
								phone: that.userInfo.phone,
								code: res.code
							}, true, 'POST').then((r) => {
								r.data.paySign = r.data.sign
								wx.requestPayment({
									...r.data,
									success: (r) => {
										that.sToast('支付成功')
										that.getgetHyxx()
									},
									fail: (r) => {
										that.sToast('取消')
										console.log(r)
									}
								})
							})
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box3 {
		padding: 0 35rpx 50rpx;

		.text2 {
			line-height: 32rpx;
		}
	}

	.box2 {
		width: 705rpx;
		margin: 0 auto 40rpx;
		padding: 40rpx 25rpx 35rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx #F1F2F3;
		border-radius: 13rpx;
		 .phone {
				height: 100rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 16rpx 0rpx #FDE9EA;
				border-radius: 13rpx 13rpx 13rpx 13rpx;
				border: 1rpx solid #FDE9EA;
				padding: 0 50rpx 0 50rpx;
			}
        .btn {
				width: 573rpx;
				height: 90rpx;
				background: linear-gradient(to right, #FF5858, #F857A5);
				border-radius: 45rpx 45rpx 45rpx 45rpx;
				margin: 0 auto;
			}
		.amount {
			width: 200rpx;
			height: 215rpx;
			box-shadow: 0rpx 0rpx 16rpx 3rpx #FFE8EA;
			border-radius: 13rpx 13rpx 13rpx 13rpx;
			margin-bottom: 25rpx;

			.text1 {
				color: #F53E35;
			}

			.suggest {
				width: 55rpx;
				height: 35rpx;
				background: #F53E35;
				border-radius: 13rpx 0 13rpx 0;
				top: 0;
				left: 0;
			}
		}

		.amount:not(:nth-of-type(3n)) {
			margin-right: 25rpx;
		}
	}

	.box1 {
		width: 705rpx;
		margin: 20rpx auto;
		padding: 25rpx 20rpx 30rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx #F1F2F3;
		border-radius: 13rpx;

	}

	.header {
		width: 100%;
		top: 0;
		left: 0;
		background: linear-gradient(to left, #F857A5, #FF5858);
	}
</style>